<template>
 <div>
 <!-- <router-view></router-view> -->
 ====APP==={{$store.state.count}}==={{count1}}===
 {{name}}==={{age}}==={{total}}==={{$store.getters.total}}
 <button @click="handel">+5</button>
 <button @click="asyncAdd">+2</button>

 <hr>
 <Father></Father>
 <hr>
 <Uncle></Uncle>
 
 </div>
</template>

<script>
// import { mapState ,mapMutations,mapActions} from 'vuex'
import { mapState ,mapMutations,mapGetters} from 'vuex'
import Father from './vuex/Father.vue'
import Uncle from './vuex/Uncle.vue'
export default{
  components:{
    Father,
    Uncle
  },
    name:'',
    data () {
        return {
          obj:{
            n:5
          }  
        }
    },
    created () {
      console.log(this.$store.state.count);
      console.log(this.$store.getters.total);
    },
    computed:{
      count1(){
        return this.$store.state.count
      },
      ...mapState(['name','age']),
      ...mapGetters(['total'])

    },
    methods:{
      ...mapMutations(['changeHandel']),
      // ...mapActions(['asyncHadle']),
      handel(){
        this.changeHandel(this.obj)
      },
      asyncAdd(){
        //dispatch,调用actions里面的方法
        this.$store.dispatch('asyncHadle',2)
      }
      // asyncAdd(){
      //   this.asyncHadle(2)
      // }
    }
}
</script>
<style lang='less'  scoped>
    
</style>
